/* 
 * 定义form表单元素的样式。
 * 设置宽度为500px，确定表单在页面中的水平尺寸大小，使其占据一定的宽度空间。
 * 通过padding: 40px 20px添加内边距，上下内边距为40px，左右内边距为20px，让表单内部元素与表单边框有一定间隔，提升视觉效果。
 * 设置display: flex和flex-direction: column，将表单内部元素按照垂直方向排列，采用弹性盒子布局，方便对内部子元素进行布局控制。
 * margin: 50px auto让表单在页面中上下有50px的外边距，并在水平方向上自动居中显示，使表单在页面中处于合适的位置且布局美观。
 * 设置边框为3px宽的粉色实线（border: 3px solid pink），并添加15px的边框圆角（border-radius: 15px），使表单呈现出带有圆角的矩形外观，更具美观性。
 * 设定字体大小为20px，统一表单内文字的字号大小，保持整体风格一致。
 * 设置定位方式为相对定位（position: relative），方便后续其内部绝对定位元素基于它进行定位布局。
 */
 form{
  width: 500px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  margin: 50px auto;
  border: 3px solid pink;
  border-radius: 15px;
  font-size: 20px;
  position: relative;
}

/* 
 * 选择form表单元素下的label标签元素的样式规则。
 * 设置高度为60px，确定每个label元素在垂直方向上占据的空间大小，宽度则设置为100%，使其能占满所在父元素（这里是form）的宽度，
 * 便于后续在label内部更好地排列其他元素，比如输入框等。
 */
form>label{
  height: 60px;
  width: 100%;
}

/* 
 * 选择form表单元素下的label标签元素内部的input输入框元素的样式规则。
 * 设置宽度为70%，使其占所在label元素宽度的70%，保证有合适的输入区域宽度，同时设置高度为30px，确定输入框的垂直尺寸。
 * 字体大小设置为20px，与表单整体的文字字号保持一致，便于查看输入内容。
 * 通过padding-left: 10px添加左边距，让输入的内容与输入框左边有一定的间隔，使输入内容显示更清晰美观。
 */
form>label>input{
  width: 70%;
  height: 30px;
  font-size: 20px;
  padding-left: 10px;
}

/* 
 * 选择form表单元素下的p标签元素内部的a链接元素的样式规则。
 * 使用!important关键字强制将链接的颜色设置为skyblue（天蓝色），使其颜色不受其他可能的样式冲突影响，
 * 突出显示该链接元素，可能用于一些重要的跳转链接等情况，让用户能清晰识别并点击操作。
 */
form>p>a{
  color: skyblue!important;
}

/* 
 * 定义form表单元素下的button按钮元素的样式规则。
 * 设置内边距为5px，让按钮在水平和垂直方向上有一定的内部空间，使按钮看起来更饱满、美观，同时也便于点击操作。
 * 设置鼠标指针样式为手型（cursor: pointer），当鼠标悬停在按钮上时，提示用户这是一个可点击的元素，方便用户交互。
 * margin-top: 10px添加顶部外边距，使按钮与上方元素之间有一定的间隔距离，避免布局过于紧凑。
 * 字体大小设置为20px，保证按钮上文字的合适大小，便于用户查看和操作。
 */
form>button{
  padding: 5px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 20px;
}

/* 
 * 选择form表单元素下的span元素的样式规则。
 * 设置文字颜色为红色（color: red），通常用于显示一些错误提示等重要信息，以醒目的颜色引起用户注意。
 * 通过position: absolute设置为绝对定位，使其能脱离文档流，按照指定的位置进行摆放。
 * left: 50%和transform: translateX(-50%)的组合使用，让该span元素在水平方向上居中显示，
 * top: 5px则将其定位在距离顶部5px的位置，使其出现在合适的地方，比如可以用于显示表单验证错误信息等情况。
 * 初始状态下设置为不显示（display: none），后续可以根据具体的业务逻辑，比如表单验证失败时，将其显示出来。
 * 设置宽度为500px，确定其水平方向上占据的空间大小，并且通过text-align: center让内部文字在水平方向上居中对齐，
 * 使显示的提示信息更加整齐美观。
 */
form>span{
  color: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5px;
  display: none;
  width: 500px;
  text-align: center;
}

/* 
 * 选择form表单元素下的label标签元素内部的select下拉选择框元素的样式规则。
 * 通过padding: 3px 10px添加内边距，让下拉选择框内部的选项内容与边框有一定的间隔，使显示更清晰美观。
 * 字体大小设置为20px，与表单整体的文字字号保持一致，方便用户查看和选择下拉选项内容。
 */
form>label>select{
  padding: 3px 10px;
  font-size: 20px;
}